<template>
  <div class="box">
    <input v-focus type="text" v-model="filter" placeholder="搜索">
    <ul>
      <li v-for="(item,index) in content" :key="index">
        <h3 v-change="'color'">{{item.title | toUpCase}}</h3>
        <p>{{item.body | hidde}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: [],
      filter: ""
    };
  },
  computed: {
    newMsg() {
      return this.content.filter((item, index) => {
        return item.title.indexOf(this.filter) != -1;
      });
    }
  },
  created() {
    this.$axios.get("https://jsonplaceholder.typicode.com/posts").then(res => {
      console.log(res);
      this.content = res.data.slice(0, 10);
    });
  },
  methods: {},
  directives: {
    change: {
      bind(el, binding) {
        if (binding.value == "color") {
          el.style.color = "red";
        }
      }
    },
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  },
  filters: {
    toUpCase(value) {
      return value.toUpperCase();
    },
    hidde(value) {
      return value.slice(0, 200) + "...";
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
  input {
    height: 30px;
    display: block;
    width: 300px;
    margin: 0 auto;
    color: red;
  }
  input::placeholder {
    color: cyan;
  }
  h1 {
    width: 400px;
    margin: 10px auto;
  }
  li {
    padding: 20px;
    width: 400px;
    height: 300px;
    margin: 10px auto;
    background-color: grey;
    border-radius: 20px;
    h3 {
      margin-bottom: 20px;
    }
  }
}
</style>
